import React, { Component } from 'react'
import styles from "../homePage.less"
import { getMvList, getMvUrl } from "../../../api/homePage"
import classNames from 'classnames';
import { Swiper, SwiperSlide } from 'swiper/react';
import { spliceSongLit } from '../../../utils/querySearch';
import Icon from '../../../components/icon/Icon';
import { withRouter } from "react-router-dom"
import { message } from "antd"
class MvRecommend extends Component {
  state = {
    mvListData: []
  }
  componentDidMount() {
    this.setMvList({id: "官方推荐"})
  }
  setMvList = async () => {
      let width = window.innerWidth;
      let size = width > 800? 5: 3;
      let arr = []
      let res = await getMvList({
        limit: 30
      })
      if(res.data.length > 0) {
        arr = spliceSongLit(res.data, size)
      }
      this.setState({
        mvListData: arr
      })
  }
  gotoMv = async (detail) => {
    const newTab = window.open('', '_blank');
    let res = await getMvUrl({id: detail.id})
    if(res.data.url) {
      newTab.location = res.data.url;
    }else {
      message.warning({content: "无法找到播放地址， 请尝试播放其他Mv", key: "请尝试播放其他Mv"})
    }
  }
  searchKey = (key, e) => {
    console.log(key);
    if(e) {
      e.stopPropagation();
    }
    this.props.history.push({ pathname: "/key_search_music_list", search: "?keyword=" + key })
  }
  render() {
    const { mvListData } = this.state
    return (
      <div className={styles.mv_recommend}>
        <div className={styles.title}>MV排行</div>
        <div className={styles.song_list}>
          <Swiper
            onSlideChange={() => {console.log('slide change');this.swiper.activeIndex = 0}}
            onSwiper={(swiper) => {this.swiper = swiper}}
            // spaceBetween={0}
            // slidesPerView={3}
          >
          {
            mvListData.length > 0? 
            mvListData.map(mvKist =>(
              <SwiperSlide key={mvKist[0].id}>
                <div className={styles.song_list_data_box}>
                  {
                    // selectId == "官方推荐"? 
                      mvKist.map(item => (
                        <div key={item.id} className={styles.song_list_data}>
                          <div className={styles.imgBox} onClick={()=> this.gotoMv(item)}>
                            <img src={item.cover} alt=""/>
                          <div className={styles.song_list_keepOut}>
                            <div className={styles.song_list_keepOut_icon}>
                              <Icon type="icon-bofang" />
                            </div>
                          </div>
                          </div>
                          <div className={styles.mv_list_name} onClick={(e) => {this.searchKey(item.name, e)}}>
                            {item.name}
                          </div>
                          <div className={styles.mv_list_artist_count } onClick={(e) => this.searchKey(item.artistName, e)}>
                            {item.artistName}
                          </div>
                        </div>
                      
                      ))
                  }
                </div>
              </SwiperSlide>
            ))
            : <div className={styles.emptySongList}>暂时无数据</div>
          }
        </Swiper>
        </div>
      </div>
    )
  }
}

export default withRouter(MvRecommend)
